<script lang="ts" setup>
import type { VbenFormProps } from '#/adapter/form';
import type { VxeGridListeners, VxeGridProps } from '#/adapter/vxe-table';

import { ref } from 'vue';

import { Page } from '@vben/common-ui';

import { message } from 'ant-design-vue';

import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { Apis } from '#/api';

const currPost = ref<any>({});

interface RowType {
  category: string;
  color: string;
  id: string;
  price: string;
  productName: string;
  releaseDate: string;
}

const formOptions: VbenFormProps = {
  // 默认展开
  collapsed: false,
  schema: [
    {
      component: 'Input',
      fieldName: 'userId',
      label: '用户ID',
    },
    {
      component: 'Input',
      fieldName: 'productName',
      label: '帖子ID',
    },
    {
      component: 'Input',
      fieldName: 'searchContent',
      label: '发布内容',
    },
    {
      component: 'Select',
      componentProps: {
        allowClear: true,
        options: [
          {
            label: '正常',
            value: '1',
          },
          {
            label: '封禁',
            value: '2',
          },
        ],
        placeholder: '请选择',
      },
      fieldName: 'status',
      label: '帖子状态',
    },
  ],
  // 控制表单是否显示折叠按钮
  showCollapseButton: true,
  // 按下回车时是否提交表单
  submitOnEnter: false,
};

const gridOptions: VxeGridProps<RowType> = {
  checkboxConfig: {
    highlight: true,
    labelField: 'name',
  },
  scrollY: {
    enabled: true,
    gt: 0,
    threshold: 30,
  },
  columns: [
    { type: 'checkbox', width: 60 },
    { title: '序号', type: 'seq', width: 50 },
    {
      field: 'user',
      title: '用户信息',
      slots: { default: 'user' },
    },
    { field: 'content', title: '帖子内容' },
    {
      field: 'images',
      title: '帖子图片',
      slots: { default: 'images' },
    },
    { field: 'status', title: '帖子状态' },
    { field: 'createdAt', title: '发布时间' },
    { field: 'operation', title: '操作', slots: { default: 'operation' } },
  ],
  height: 'auto',
  keepSource: true,
  pagerConfig: {
    enabled: false,
  },
  proxyConfig: {
    ajax: {
      query: async ({ page }, formValues) => {
        message.success(`Query params: ${JSON.stringify(formValues)}`);
        return await Apis.forum.post.getCursorPage({
          params: {
            page: page.currentPage,
            pageSize: page.pageSize,
            ...formValues,
          },
        });
      },
    },
  },
};

const [Grid] = useVbenVxeGrid({ formOptions, gridOptions });

const gridEvents: VxeGridListeners = {
  scrollBoundary({ direction }) {
    switch (direction) {
      case 'bottom': {
        console.log('触发底部阈值');
        // loadList(20);
        break;
      }
      case 'left': {
        console.log('触发左侧阈值');
        break;
      }
      case 'right': {
        console.log('触发右侧阈值');
        break;
      }
      case 'top': {
        console.log('触发顶部阈值');
        break;
      }
    }
  },
};

function handleViewComment(row: any) {
  currPost.value = row;
  drawerApi.open();
}

function handleSticky(row: any) {
  currPost.value = row;
  baseStickyModalApi.open();
}

function handleBan(row: any) {
  currPost.value = row;
  baseBanModalApi.open();
}
</script>

<template>
  <Page auto-content-height>
    <Grid table-title="群聊推送记录列表" v-on="gridEvents">
      <template #toolbar-tools>
        <a-space>
          <a-button type="primary" @click="handleBatchPush()">
            批量加入推送
          </a-button>
          <a-button danger type="primary" @click="handleBatchBan()">
            批量封禁
          </a-button>
        </a-space>
      </template>
      <template #user="{ row }">
        <div>{{ row.user.nickname }}</div>
      </template>
      <template #images="{ row }">
        <div class="my-[2px] flex flex-row items-center justify-center">
          <a-image-preview-group>
            <a-image
              v-for="(img, imgIndex) in row.images"
              :key="imgIndex"
              :height="60"
              :src="img.url"
              :width="60"
            />
          </a-image-preview-group>
        </div>
      </template>
      <template #operation="{ row }">
        <a-button size="small" type="link" @click="handleViewComment(row)">
          查看评论
        </a-button>
        <a-divider type="vertical" />
        <a-button size="small" type="link" @click="handleSticky(row)">
          置顶
        </a-button>
        <a-divider type="vertical" />
        <a-button danger size="small" type="link" @click="handleBan(row)">
          封禁
        </a-button>
      </template>
    </Grid>
  </Page>
</template>
